<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
	<title>jquery.datastore.js Test Suite</title>
	<link rel="stylesheet" href="qunit.css" type="text/css"/>
	<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
	<script type="text/javascript" src="jquery.datastore.js"></script>
	<script type="text/javascript" src="jquery.datastore.templates.js"></script>
    <script type="text/javascript" src="qunit.js"></script>
    <script type="text/javascript">
	$(function() {
		var error_ok = function(callback, message) {
			try {
				callback.apply(null);
			}
			catch(e) {
				console.info("Error OK: " + e);
				ok(true, message);
				return;
			}
			ok(false, message);
		};
		
		
		test("Templates", function() {
			$.ds.loadModule("storage");
			$.ds.loadModule("query");
			$.ds.loadModule("templates");
			
			$.ds.templates.loadTemplates();
			
			$.ds.storage.transaction(function() {
				$.ds.storage.setValue("foo", {
					a : "a",
					b : {
						c : "c",
						d : "d",
						e : [ 0, 2, 3, {
							f : "hello",
							g : "world"
						}]
					}
				});
				$.ds.storage.setValue("bar", "bar");
			});
			
			$.ds("*").render("child-template", "#tree-test");
			
			$.ds.unloadModule("storage");
			$.ds.unloadModule("query");
			$.ds.unloadModule("templates");
		});
	});
    </script>
	<style type="text/css" media="screen">
		.collection {
			width:40%;
			margin-left:5%;
			float:left;
		}
		object[type='text/html'] {
			display:none;
		}
	</style>
	<object type="text/html" name="child-template">
		<ul>
			<li for-each="*" title="{{ @name }}">
				<a href="javascript:void(0)" onclick="alert('Show {{ @path }}');">{{ @name }}</a> : <code>{{ @kind }}</code>
				<a href="javascript:void(0)" use-if="@kind != 'value'" onclick="alert('Add child to {{ @path }}');">
					<code>[Add Child]</code>
				</a>
				<!-- 
				<table style="font-size:9pt" border="1">
					<tr>
						<th>Property</th>
						<th>Value</th>
					</tr>
					<tr for-each='@*'>
						<td>{{ $name }}</td>
						<td>{{ $value }}</td>
					</tr>
				</table>
				-->
				<div use-template="child-template" use-if="@kind != 'value'"> </div>
			</li>
		</ul>
	</object>
  </head>
  <body>
    <h1 id="qunit-header">jquery.datastore.templates.js Test Suite</h1>
    <h2 id="qunit-banner"></h2>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests">
    </ol>
	<div id="tree-test"> </div>
  </body>
</html>